<template>
  <div class="outer-padding">
    <div class="ds-title pd-bottom--32">账户管理</div>
    <div class="fl pd-bottom--32">
      <a-button type="primary" class="mr-8" @click="$router.push('/system/accountdetail')"
        >添加账号</a-button
      >
      <a-button type="primary" @click="getActive">批量导入</a-button>
      <div class="mla">
        <a-input-search
          style="width: 480px"
          v-model:value="queryParam.account"
          placeholder="搜索账号"
          @search="onSearch"
        >
        </a-input-search>
      </div>
    </div>
    <a-tabs v-model:activeKey="activeKey" @change="navTab">
      <a-tab-pane :key="index" :tab="item" v-for="(item, index) in classType"></a-tab-pane
    ></a-tabs>
    <dynamic-table ref="tableRef" :columns="columns" :get-list-func="loadData" rowKey="id">
      <template #limit="{ record }">
        {{ dateArr[record.limit - 1] }}
      </template>
      <template #status="{ record }">
        <a-switch v-model:checked="record.checked"></a-switch>
      </template>
      <template #operate="{ record }">
        <span
          class="pointer pdl-12 pdr-12"
          style="border-right: 1px solid #ddd"
          @click="stop(record.id)"
        >
          停用
        </span>
        <span
          class="pointer pdl-12 pdr-12"
          style="border-right: 1px solid #ddd"
          @click="$router.push(`/system/accountdetail?id=${record.id}`)"
        >
          <icon-font type="icon-edit"></icon-font>
          编辑
        </span>
        <a-popconfirm title="你确定要删除此条记录吗？" @confirm="del(record.id)">
          <span class="pointer pdl-12">
            <icon-font type="icon-delete"></icon-font>
            删除
          </span>
        </a-popconfirm>
        <span class="pointer pdl-12" @click="resetPassWord(record.id)">
          <icon-font type="icon-sync"></icon-font>
          重置密码
        </span>
      </template>
    </dynamic-table>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRoute } from 'vue-router'
  import { useStore } from '@/store'
  import { getActiveList, postDelById, postStopById } from '@/api/system/index'
  import { columns } from './columns'
  import iconFont from '@/components/iconfont/icon-font'
  import { useCreateModal } from '@/hooks'
  import resetModal from './resetPassWord/reset-modal.vue'

  export default defineComponent({
    name: 'Markcomponent',
    components: {
      DynamicTable,
      iconFont,
    },
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const valueDate = ref<moment.Moment[]>([])

      const route = useRoute()

      const store = useStore()

      const state = reactive({
        activeKey: 0,
        classType: ['领导', '教师', '学生'],
        dateArr: ['30天', '1年', '2年', '3年'],
        queryParam: {
          account: null,
        },
      })

      /**
       * @description 加载表格数据
       */
      const loadData = (params) => {
        const myParams = { ...params, ...state.queryParam }
        return getActiveList(myParams)
      }

      const getActive = () => {}

      onMounted(async () => {})

      const onSearch = (ev) => {
        console.log(ev)
      }
      const navTab = (ev) => {
        state.activeKey = ev
      }
      // 停用
      const stop = async (ev) => {
        await postStopById({ id: ev })
      }
      // 删除
      const del = async (ev) => {
        await postDelById({ id: ev })
      }
      // 重置密码
      const resetPassWord = (record) => {
        useCreateModal(resetModal, {
          fields: record,
        })
      }

      // tableRef.value?.refreshTableData()

      return {
        ...toRefs(state),
        tableRef,
        onSearch,
        loadData,
        columns,
        stop,
        del,
        getActive,
        resetPassWord,
        navTab,
      }
    },
  })
</script>
<style lang="scss" scoped>
  :deep .ant-switch-checked {
    background: #43cd80;
  }
</style>
